<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head th:replace="_fragments::head(归档)">
	 <meta charset="utf-8" /> 
	 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
	 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <title>归档</title>

	<!--Bootstrap -->
     <link  href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 
     <link  href="css/index.css" rel="stylesheet" /> 
	<style type="text/css">
 	.selfdivform{
    float: left;
    height: 30px;
    margin: 12px 12px;
    border: 0px;
   	padding:0px;
	} 
	.img-mini:hover{
				transform: scale(1.2);
			}

	</style>
  </head>
  
  <body>
	<!-- 导航条 -->
	<nav th:replace="_fragments::nav(1)" class="navbar navbar-default navbar-fixed-top " style="background-color: rgba(0,0,0,0.5);border: 0.5px;">
	 <div class="container">
	  <div class="navbar-header row" >
	    <!-- logo -->
	    <a class="navbar-brand" href="#"><font class="font-nav">ZkcBlog</font></a>

 		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" >
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar" style="background: #fff"></span>
	        <span class="icon-bar" style="background: #fff"></span>
	        <span class="icon-bar" style="background: #fff"></span>
	    </button>
	  </div>
	  <!-- 自适应菜单栏 -->
	  <div class="navbar-right navbar-collapse collapse" id="nav-menu">
		  <ul class="nav navbar-nav" >
		  	<li><a href="index.html"><font class="font-nav">首页</font></a></li>
		   	<li><a href="archive.html"><font class="font-nav">文章归档</font></a></li>
		  	<li><a href="blogcate.html"><font class="font-nav">文章分类</font></a></li>
		   	<li><a href="aboutweb.html"><font class="font-nav">关于网站</font></a></li>
		  </ul>
		  <form class="navbar-form navbar-left" id="searchform">
	        <div class="form-group">
	          <input th:type="text" class="form-control" th:placeholder="Search"/>
	        </div>
	        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
	      </form>
      </div>
	 </div>
	</nav>
	<!--表头主体背景-->
	<div style="height: 265px;">
	<div id="header-blog"  style=" height:365px; background-image: url(image/9.png); background-size:cover; background-position: center;background-repeat: no-repeat;margin: 0 auto;
		position: relative;z-index: -1;">
	</div>
	</div>
	<!-- 中间主体 -->
	<div id="main" class="container">
		<div class="row">
			<!--正文-->
			<div class="col-md-8 panel panel-default" style="padding: 0px;">
				<!--标注-->
				<div class="panel-heading" style="background:#fff;padding: 5px 15px;">
					<div class="pull-left"><h5>文章归档</h5></div>
			 		<!---<button id="archive-btn" class="btn btn-default btn-sm pull-right" data-toggle="collapse" data-target="#" >
				        <span class="glyphicon glyphicon-time" ></span>
				    </button>-->
				    <!-- 时间归档分类 -->
					<div class="btn-group pull-right">
					  <button id="archive-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					    年份 <span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu">
					    <li><a href="#">2020</a></li>
					    <li><a href="#">2019</a></li>
					    <li><a href="#">2018</a></li>
					  </ul>
					</div>
				    <div class="clearfix"></div>
				</div>
				<!--正文-->
				<div class="panel-body" style="margin: 10px 15px;">
					<div>
						<ol class="list-group archive-menu">
						  <li class="list-group-item" v-for="blog in blogs.list">
						  	<span><img src="image/archive1.jpg" height="100%"/></span>
						  	<span class="content-footer">  {{blog.createtime}}  </span>
						  	<a :href="'showblog.html?blogid='+blog.blogid"><font class="archive-tl">{{blog.title}}</font></a>
						  </li>
<!-- 						  <li class="list-group-item">
						  	<span><img src="image/archive1.jpg" height="100%"/></span>
							<span class="content-footer">  2020-08-15  </span>
						  	<a href="#"><font class="archive-tl">陈二狗的妖孽人生</font></a>
						  </li>
						  <li class="list-group-item">
						  	<span><img src="image/archive1.jpg" height="100%"/></span>
							<span class="content-footer">  2020-08-15  </span>
						  	<a href="#"><font class="archive-tl">陈二狗的妖孽人生</font></a>
						  </li>
						  <li class="list-group-item">
						  	<span><img src="image/archive1.jpg" height="100%"/></span>
							<span class="content-footer">  2020-08-15  </span>
						  	<a href="#"><font class="archive-tl">陈二狗的妖孽人生</font></a>
						  </li>
						  <li class="list-group-item">
						  	<span><img src="image/archive1.jpg" height="100%"/></span>
							<span class="content-footer">  2020-08-15  </span>
						  	<a href="#"><font class="archive-tl">陈二狗的妖孽人生</font></a>
						  </li> -->
						</ol>
					</div>
					<div id="blog-text-footer" style="border-top: 1px solid #ddd;">
					<!-- 分页 -->
					 <nav aria-label="Page navigation">
					  <ul class="pagination">
					    <li>
					      <a id="up" class="btn" aria-label="Previous" v-on:click="blogajax(blogs.pageNum-1,year)">
					        <span aria-hidden="true">上一页</span>
					      </a>
					    </li>
		 			    <li class="active"><a>{{blogs.pageNum}}</a></li>
					    <li>
					      <a id="down" class="btn"  aria-label="Next" v-on:click="blogajax(blogs.pageNum+1,year)">
					        <span aria-hidden="true">下一页</span>
					      </a>
					    </li>
					    <li class="disabled">
					        <a class="btn">总页数：{{blogs.pages}}</a>
					    </li>
					  </ul>
					</nav>
					<!--分页结束-->
					</div>
				</div>
			</div>

			<!--侧边目录-->
			<div id="sder-main" class="col-md-4" style="margin-top: 51px;">
				<div class="panel panel-default" style="padding: 10px 10px;">
					<div id="panel-heading">
					<h4>年份</h4>
					</div>
					<div class="panel-body" style="border-top: 1px solid #ddd;padding: 4px 0px;">
						<div class="list-group">
						  <button class="list-group-item" v-for="y in years" v-on:click="yearblogs(y)">
						  	{{y}}
						  </button>
						  <!-- <a href="#" class="list-group-item">
						  <span class="badge">14</span>2019</a> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--中间结束-->

	<!-- 底部 -->
	<footer th:replace="_fragments::footer" class="panel-footer" style="background: #2a2730; color: #fff">
	  <div class="container">
	    <ul class="list-inline">
	      <li><a href="https://github.com/twbs/bootstrap">GitHub 仓库</a></li>
	      <li><a href="../getting-started/#examples">实例</a></li>
	      <li><a href="http://www.youzhan.org">优站精选</a></li>
	      <li><a href="../about/">关于</a></li>
	    </ul>

	    <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>

	    <p>本项目源码受 <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>开源协议保护，文档受 <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a> 开源协议保护。</p>
	  </div>
	</footer>
	
	<div th:replace="_fragments::js">
	<!--底部结束-->
	<!--     jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery/jquery-2.1.1.min.js"></script>
	<!--     加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>  
    <!-- 自定义js -->
    <script src="/js/bootstrap.min.js" th:src="@{/js/index.js}" ></script>
    </div>
</body>
  
  
<script>
//通过vue.js 把数据和对应的视图关联起来
var url = "http://localhost:8888/archive";
new Vue({
      el: '#main',
      data: {
        blogs: [],
        //year
        years:[],
        year:''
      },
      created:function(){
    	  var seft=this;
    	  //查询全部blog
    	  seft.blogajax(1,seft.year);
    	  
    	  //获取归档年份
     	  $.ajax({
				url:url+'/year',
				type:'get',
				//async: false,//同步
				success : function(data){
					seft.years=data.data;
				},
				fail:function(){
					console.log("请求错误");
				}
			}); 
      },
      methods:{//所有方法必须在method里创建
    	  blogajax:function(startnum,year){
    		  var seft=this;
    		  $.ajax({
    				url:url,
    				type:'get',
    				data:{start:startnum,year:year},
    				//async: false,//同步
    				success : function(data){
    					seft.blogs=data.data;
    					if(seft.blogs.pageNum>1){
    						$("#up").removeClass("disabled");
    					}else{
    						$("#up").addClass("disabled");
    					}
     					if(seft.blogs.pageNum>=seft.blogs.pages){
    						$("#down").addClass("disabled");
    					}else{
    						$("#down").removeClass("disabled");
    					} 
     					
    					//限制标题与文章在表格中显示大小
    					var i=0;
    					for(blog in seft.blogs.list){
    						if(seft.blogs.list[i].title.length>20){
    							seft.blogs.list[i].title=seft.blogs.list[i].title.slice(0,20)+'...';
    						}
    						if(seft.blogs.list[i].content.length>80){
    							seft.blogs.list[i].content=seft.blogs.list[i].content.slice(0,80)+'...';
    						}
    						i++;
    					}
     					
    				},
    				fail:function(){
    					console.log("请求错误:"+err);
    				}
    			});
    	  },
    	  yearblogs:function(year){
    		  var seft=this;
    		  seft.year=year;
    		  seft.blogajax(1,seft.year);
    	  }
      }
    })
</script>
</html>